import React, { useState } from'react';
import { searchData } from './data.js';

const SearchSuggestion = () => {
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [isFocused, setIsFocused] = useState(false);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    const filteredSuggestions = searchData.filter((item) =>
      item.toLowerCase().startsWith(value.toLowerCase())
    );
    setSuggestions(filteredSuggestions);
  };

  const handleInputBlur = () => {
    setIsFocused(false);
    setSuggestions([]);
  };

  const handleInputFocus = () => {
    setIsFocused(true);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="请输入关键词"
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
        onFocus={handleInputFocus}
      />
      {isFocused && suggestions.length > 0 && (
        <ul className="suggestion - list">
          {suggestions.map((suggestion, index) => (
            <li key={index}>{suggestion}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default SearchSuggestion;